<template>

  <div class="main">
    <div class="title">
        <h1>study01基本使用</h1>
    </div>
    <FullCalendar ref="funllCalendarRef" :options="calendarOptions"  />
  </div>
</template>

<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
export default {
    components: {
        FullCalendar,
    },
    data() {
        return {
            myCalendar:null,
            calendarOptions: {  
                plugins: [ dayGridPlugin, interactionPlugin ],
        initialView: 'dayGridMonth',
                weekends: false // 隐藏周六和周日              
            }
        }
    },
    mounted () {
        this.myCalendarApi = this.$refs.funllCalendarRef.getApi(); //获取日历Api
        myCalendarApi.next()
    }

}
</script>

<style lang="sass" scoped>
@import "../../../node_modules/fullcalendar/main.css";

.main{
    margin: 20px;
    
    .title{
        font-size: 20px;
        color: blue;
        place-content: center;
    }
}

</style>